/* 插件的封装
    1. 骨架  独立于window，不被window上的变量污染，加分号保护
    2. 设定实例参数: 容器的css选择器、setting（自动轮播，loop循环，添加小点）
    3. 插件的内容：
        --初始化  swiper-wraper的宽度，子元素的宽度
        --操作的具体事项  元素的运动、左右点击事件 小点点击事件
        --可选事项  是否添加小点，是否自动轮播 自动轮播间隔 是否无限轮播
*/
// 避免全局变量过多   或污染全局变量
;(function (w, $) {
    function Swiper(select, setting) {
        this.ele = document.querySelector(select).firstElementChild;
        // 全局计数器
        this.count = 0;
        this.Wth = $(this.ele).children(0).width();
        // 设置默认值
        this.setting = Object.assign({
            loop: false,
            hasDott: false,
            autoPlay: false,
            duration: 2000,
        }, setting)
        // 执行初始化
        this.init();
    }
    // 简化在原型对象上挂载方法
    Swiper.prototype.extends = function (obj) {
        for (var i in obj) {
            if (!(i in Swiper.prototype)) {
                Swiper.prototype[i] = obj[i];
            }
        }
    }
    Swiper.prototype.extends({
        // 初始化函数
        init () {
            // 初始化无限轮播, 更改页面配置
            this.initLoop();
            // 左右点击事件
            this.go();
            // 判断是否有小点
            if (this.setting.hasDott) {
                // 初始化小点
                this.initDott();
                // 小点点击事件
                this.dottEvent();
            }
            // 判断是否设置了自动轮播
            if (this.setting.autoPlay) {
                // 设置自动播放
                this.play();
            }
        },
        // 初始化无限轮播, 更改页面配置
        initLoop () {
            // 是否复制第一张图片到最后
            if (this.setting.loop) {
                var $cloneNode = $(this.ele).children().eq(0).clone();
                $(this.ele).append($cloneNode);
            }
            // 动态设置wraper的宽和slide的宽
            var n = $(this.ele).children().length;
            $(this.ele).width(`${n}00%`).children().width(`${100 / n}%`);
        },
        // 左右点击事件
        go () {
            var $arrow = $('.arrow');
            var ele = this.ele;
            var that = this;
            // 右点击事件
            $arrow[1].onclick = function () {
                // 最后一张图片时
                if (that.count === $(ele).children().length - 1) {
                    // 判断是否设置了无限轮播
                    if (that.setting.loop) {
                        that.count = 0;
                        ele.style.left = 0;
                    } else {
                        that.count = -1;
                    }
                }
                that.count++;
                that.move();
                // 无限轮播时 最后一张图片的小点
                if (that.setting.hasDott) {
                    var index = that.setting.loop ? ($(ele).children().length - 1) : $(ele).children().length;
                    $('.active').removeClass('active');
                    $('.dott').eq(that.count%index).addClass('active');
                }
                /*if (that.setting.hasDott) {
                    if (that.setting.loop && that.count === $(ele).children().length - 1) {
                        $('.active').removeClass('active');
                        $('.dott').eq(0).addClass('active');
                    } else {
                        $('.active').removeClass('active');
                        $('.dott').eq(that.count).addClass('active')
                    }
                }*/
            }
            // 左点击事件
            $arrow[0].onclick = function () {
                // 第一张图片时
                if (that.count === 0) {
                    // 是否无限轮播
                    if (that.setting.loop) {
                        that.count = $(ele).children().length - 1;
                        ele.style.left = -that.count * that.Wth + 'px';
                    } else {
                        that.count = $(ele).children().length;
                    }
                }
                that.count--;
                that.move();
                if (that.setting.hasDott) {
                    $('.active').removeClass('active');
                    $('.dott').eq(that.count).addClass('active')
                }
            }
        },
        // 初始化小点
        initDott () {
            var length = this.setting.loop ? $(this.ele).children().length-1 : $(this.ele).children().length;
            var str = '<ul class="dotts">';
            for (var i = 0; i < length; i++) {
                str += '<li class="dott"></li>';
            }
            str += '</ul>';
            str = str.replace('<li class="dott"></li>', '<li class="dott active"></li>');
            $(this.ele).after(str);
        },
        // 小点点击事件
        dottEvent () {
            var that = this;
            $('.dott').click(function () {
                // 获取小点索引
                that.count = $(this).index();
                // 动起来
                that.move();
                $('.active').removeClass('active');
                $(this).addClass('active');
            })
        },
        // 设置自动播放
        play () {
            // 设置自动播放定时器 间隔duration触发点击事件
            var duration = this.setting.duration < 1500 ? 1500 : this.setting.duration;
            var that = this;
            this.timer1 = setInterval(function () {
                $('.arrow').eq(1).click();
            }, duration)
            $(this.ele).parent().hover(function () {
                clearInterval(that.timer1);
            }, function () {
                that.timer1 = setInterval(function () {
                    $('.arrow').eq(1).click();
                }, duration)
            })
        },
        // 运动函数
        move () {
            //清除定时器
            clearInterval(this.timer);
            // 获取目标位置
            var target = -this.count * this.Wth;
            // 获取当前位置
            var ele = this.ele;
            var current = ele.offsetLeft;
            // 目标位置与现在位置相等时 直接终止
            if (current === target) {
                return
            }
            var that = this;
            // 设置定时器
            that.timer = setInterval(function () {
                // 获取当前位置
                current = ele.offsetLeft;
                // 获取步长
                var step = (target - current) / 10;
                // 判断步长
                if (Math.abs(step) < 1) {
                    step = step > 0 ? 1 : Math.floor(step);
                }
                // 改变位置
                current += step;
                ele.style.left = current + 'px';
                // 终止条件
                if (current === target) {
                    clearInterval(that.timer);
                    that.timer = null;
                    console.log('end...');
                }
            }, 1000/60);
        },
    })
    w.Swiper = Swiper;
})(window, jQuery)
